<template>
  <div class="dashboard-container">
    <el-row type="flex" justify="end">
      <div style="margin: 10px">
        <el-button type="primary" @click="editOpen(0)">添加</el-button>
      </div>
    </el-row>
    <el-row>
      <el-col>
        <div class="app-container">
          <el-table
            :data="tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column prop="lock_group_id" label="锁组id">
            </el-table-column>
            <el-table-column prop="lock_id" label="锁id"> </el-table-column>
            <el-table-column prop="gateway_id" label="网关id">
            </el-table-column>
            <el-table-column align="center" label="状态">
              <template slot-scope="{ row }">
                <span v-if="row.status == 0">未绑定</span>
                <span v-if="row.status == 1">已绑定</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="{ row }">
                <div style="display: flex; justify-content: space-between">
                  <el-button @click="editOpen(1, row)" type="text" size="small"
                    >修改</el-button
                  >
                  <el-popconfirm
                    :title="'确定删除这一条吗'"
                    @confirm="del(row)"
                  >
                    <el-button
                      style="margin-left: 5px"
                      slot="reference"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <Pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                          @pagination="getList" /> -->
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="editOpenType == 0 ? '新建' : '修改'"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div>
        <el-form :inline="true" :model="formEdit" class="demo-form-inline">
          <el-form-item label="锁组id">
            <el-input disabled
              v-model="formEdit.lock_group_id"
              placeholder="锁组id"
            ></el-input>
          </el-form-item>
          <el-form-item label="锁id">
            <el-input disabled
              v-model.number="formEdit.lock_id"
              placeholder="锁id"
            ></el-input>
          </el-form-item> 
          <el-form-item label="网关id">
            <el-input disabled
              v-model.number="formEdit.gateway_id"
              placeholder="网关id"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <!-- formEdit.status -->
            <el-select v-model="formEdit.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      search_form: {},
      dialogVisible: false,
      formEdit: { lock_id:"14416311",gateway_id:"1271275"},
      editOpenType: null, // 编辑保存类型
      options: [{
          value: 0,
          label: '未绑定'
        }, {
          value: 1,
          label: '已绑定'
        }],
        value:""
    };
  },
  computed: {
    store_id() {
      return this.$store.state.user.regionalData.store_id;
    },
    regionalData() {
      return this.$store.state.user.regionalData;
    },
  },
  methods: {
    editOpen(type, row) {
      if (row) {
        this.formEdit = JSON.parse(JSON.stringify(row));
      }
      this.editOpenType = type;
      this.dialogVisible = true;
    },
    edit() {
      //新建编辑
      let url, message;
      if (this.editOpenType == 0) {
        url = "/add_lock_door_api";
        message = "添加成功";
      } else {
        delete this.formEdit.store_name;
        delete this.formEdit.time;
        url = "/modify_person_api";
        message = "修改成功";
      }
      this.https(url, { ...this.formEdit, store_id: this.store_id }).then(
        (res) => {
          this.$message.success(message);
          this.dialogVisible = false;
          this.getList();
        }
      );
    },
    del(row) {
      this.https("/delete_person_api", {
        store_id: row.store_id,
        id_card: row.id_card,
      }).then((res) => {
        this.$message({
          type: "success", // success error warning
          message: `删除成功`,
          duration: 2000,
        });
        this.getList();
      });
    },

    getList() {
      console.log(this);
      this.https("/read_lock_door_api", { store_id: this.store_id }).then(
        (res) => {
          console.log(res);
          // res.result.forEach(item => {
          //     item.start_time = timestampToTime(item.start_time)
          // });
          this.tableData = res;
          // console.log(this.tableData, 'this.dataList')
        }
      );
    },
    search_Bth() {
      console.log(this.search_form, "search_form");
    },
  },
  created() {
    this.getList();
    this.$set(this.formEdit,'lock_group_id',this.regionalData.lock_group_id)
  },
};
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
}

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
